<template>
  <Row justify="space-between" class="mb-2">
    <Col>
      <Button type="primary" @click="getMenus()">获取数据</Button>
    </Col>
    <Col>
      <Button type="primary" icon="md-add" @click="handleAdd()">添加</Button>
    </Col>
  </Row>
  <Table row-key="id" :columns="columns" :data="tabledata">
    <template #icon="{ row }">
      <Icon :type="row.icon" size="20" />
    </template>
    <template #action="{ row }">
      <Space>
        <Button type="text" icon="md-add" @click="handleEdit(row)">编辑</Button>
        <Button type="text" icon="md-trash" @click="handleDelete(row)">删除</Button>
      </Space>
    </template>
  </Table>
</template>

<script setup>
import { onMounted, ref } from 'vue'
import { menus, editMenu, addMenu, deleteMenu } from './api'
import Message from '@/components/Message'

const tabledata = ref([])
const columns = [
  { title: '菜单名称', key: 'title', tree: true, align: 'center' },
  { title: '路由名称', key: 'name', align: 'center' },
  { title: '菜单路径', key: 'path', align: 'center' },
  { title: '页面', key: 'view', align: 'center' },
  { title: '菜单图标', slot: 'icon', align: 'center' },
  { title: '菜单类型', key: 'type', align: 'center' },
  { title: '菜单状态', key: 'status', align: 'center' },
  { title: '创建人', key: 'createBy', align: 'center' },
  { title: '创建时间', key: 'createTime', align: 'center' },
  { title: '操作', slot: 'action', align: 'center', className: 'table-action' }
]
const getMenus = async () => {
  const res = await menus()
  tabledata.value = res.data
}

const handleEdit = async (row) => {
  const res = await editMenu(row)
  if (res.code === 200) {
    Message.success('编辑成功')
    getMenus()
  }
}

const handleDelete = async (row) => {
  const res = await deleteMenu(row)
  if (res.code === 200) {
    Message.success('删除成功')
    getMenus()
  }
}

const handleAdd = async () => {
  // 添加菜单
  console.log('添加菜单')
  const res = await addMenu()
  if (res.code === 200) {
    Message.success('添加成功')
    getMenus()
  }
}
// getMenus()
onMounted(() => {
  // 获取菜单数据
  getMenus()
})
</script>

<style less></style>
